<template>
  <div class="user-notice-view">
    <div class="page-header">
      <h2>系统通知</h2>
      <p class="subtitle">查看来自系统的最新通知和公告</p>
    </div>

    <div class="notice-list" v-loading="loading">
      <el-empty v-if="notices.length === 0 && !loading" description="暂无系统通知"></el-empty>
      <el-card v-for="notice in notices" :key="notice.id" class="notice-card">
        <div class="notice-header">
          <div class="notice-tags">
            <el-tag 
              v-for="(tag, index) in (notice.tags || '').split(',')" 
              :key="index" 
              :type="getTagType(tag)"
              size="small"
              v-if="tag">
              {{ tag }}
            </el-tag>
          </div>
          <div class="notice-time">{{ formatDateTime(notice.createTime) }}</div>
        </div>
        <div class="notice-content" v-html="notice.content"></div>
      </el-card>

      <!-- 分页控件 -->
      <div class="pagination-container" v-if="notices.length > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import httpInstance from "@/utils/http";

export default {
  name: 'UserNoticeView',
  data() {
    return {
      notices: [],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.fetchNotices();
  },
  methods: {
    // 获取系统通知
    fetchNotices() {
      this.loading = true;
      // 获取stat为1的系统通知（仅用户可见的）
      httpInstance.post('/api/notice/get/1')
        .then(res => {
          if (res.code === 200) {
            this.notices = res.data || [];
            this.pagination.total = this.notices.length;
          } else {
            this.$message.error(res.msg || '获取系统通知失败');
          }
        })
        .catch(err => {
          console.error('获取系统通知失败:', err);
          this.$message.error('获取系统通知失败，请稍后重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 根据通知类型返回不同的标签类型
    getTagType(tag) {
      if (!tag) return '';
      const trimmedTag = tag.trim();
      const typeMap = {
        '系统': 'info',
        '招新': 'success',
        '重要': 'warning',
        '紧急': 'danger',
        '活动': 'primary',
        'hello': ''
      };
      return typeMap[trimmedTag] || '';
    },

    // 格式化日期时间
    formatDateTime(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },

    // 分页处理
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.fetchNotices();
    },
    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      this.fetchNotices();
    }
  }
}
</script>

<style scoped>
.user-notice-view {
  max-width: 800px;
  margin: 70px auto 40px; /* 增加顶部边距，避免被导航栏遮挡 */
  padding: 0 20px;
}

.page-header {
  margin-bottom: 30px;
  text-align: center;
}

.page-header h2 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.subtitle {
  color: #909399;
  font-size: 16px;
}

.notice-list {
  margin-top: 20px;
}

.notice-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.notice-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.notice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notice-time {
  color: #909399;
  font-size: 14px;
}

.notice-content {
  color: #606266;
  line-height: 1.6;
  white-space: pre-line; /* 保留换行符 */
}

.pagination-container {
  margin-top: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .user-notice-view {
    margin-top: 60px;
    padding: 0 15px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .subtitle {
    font-size: 14px;
  }
  
  .notice-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .notice-time {
    margin-top: 8px;
  }
}
</style> 